<template>
  <div class="box">
    <div class="dashboard">
      <a-row :gutter="[16, 16]">
        <a-col :span="6">
          <div class="block" :style="{ background: 'rgb(24, 144, 255)' }">
            <p>总项目数</p>
            <p class="num">{{ dashboard.totalProject || 0 }}</p>
          </div>
        </a-col>
        <a-col :span="6">
          <div class="block" :style="{ background: 'rgb(19, 194, 194)' }">
            <p>未开工项目数</p>
            <p class="num">{{ dashboard.waitProject || 0 }}</p>
          </div>
        </a-col>
        <a-col :span="6">
          <div class="block" :style="{ background: 'rgb(240, 72, 100)' }">
            <p>进行中项目数</p>
            <p class="num">{{ dashboard.doingProject || 0 }}</p>
          </div>
        </a-col>
        <a-col :span="6">
          <div class="block" :style="{ background: 'rgb(133, 67, 224)' }">
            <p>已完结项目数</p>
            <p class="num">{{ dashboard.overProject || 0 }}</p>
          </div>
        </a-col>
      </a-row>
    </div>
    <div class="statistic">
      <a-row :gutter="[16, 16]">
        <a-col :span="6">
          <ve-pie
            :title="{ text: '项目状态统计' }"
            :legend="{ bottom: '10px' }"
            :data="statusData"
            :settings="{
              label: {
                formatter: (params) => {
                  return `${params.data.name}:${params.data.value}`;
                },
              },
            }"
          ></ve-pie>
        </a-col>
        <a-col :span="18">
          <ve-line
            v-if="monthStatusData"
            :title="{ text: '月度项目状态统计' }"
            :legend="{ bottom: '10px' }"
            :data="monthStatusData"
            :extend="{
              series: {
                smooth: false,
              },
            }"
          ></ve-line>
        </a-col>
      </a-row>
    </div>
  </div>
</template>

<script>
import _ from "lodash";

const status = {
  0: "未开始",
  1: "进行中",
  2: "已完结",
};

export default {
  data() {
    return {
      dashboard: {},
      statusData: {
        columns: ["状态", "项目数量"],
        rows: [
          { 状态: "未开始", 项目数量: 112 },
          { 状态: "进行中", 项目数量: 12 },
          { 状态: "已完成", 项目数量: 82 },
        ],
      },
      monthStatusData: {
        columns: ["日期", "未开始", "进行中", "已完成"],
        rows: [
          { 日期: "1月", 未开始: 544, 进行中: 25, 已完成: 571 },
          { 日期: "2月", 未开始: 44, 进行中: 425, 已完成: 321 },
          { 日期: "3月", 未开始: 49, 进行中: 5, 已完成: 64 },
        ],
      },
    };
  },
  mounted() {
    this.getStatictis();
  },
  computed: {
    user() {
      return this.$store.getters.user;
    },
  },
  methods: {
    // 统计模态框
    getStatictis() {
      this.$myaxios.get(`/statistic/dashboard`).then((res) => {
        const { success, data, msg } = res.data;
        if (success) {
          this.dashboard = data;
        } else {
          this.$message.error(msg);
        }
      });

      this.$myaxios.get(`/statistic/status`).then((res) => {
        const { success, data, msg } = res.data;
        if (success) {
          this.statusData.rows = _.reduce(
            data,
            (all, o) => {
              all.push({ 状态: status[o.status], 项目数量: o.count });
              return all;
            },
            []
          );
        } else {
          this.$message.error(msg);
        }
      });

      this.$myaxios.get(`/statistic/monthStatus`).then((res) => {
        const { success, data, msg } = res.data;
        if (success) {
          if (data && data.length) {
            let columns = ["日期"];
            _.each(data, (o) => {
              columns.push(status[o.type]);
            });

            let rows = [];
            for (let i = 0; i < 12; i++) {
              let month = { 日期: `${i + 1}月` };
              _.each(data, (o) => {
                month[status[o.type]] = o.data[i];
              });
              rows.push(month);
            }
            this.monthStatusData = { columns, rows };
          }
        } else {
          this.$message.error(msg);
        }
      });
    },
  },
};
</script>

<style lang="less" scoped>
.box {
  width: 100%;
  height: 100%;
  background-color: white;
  display: flex;
  flex-direction: column;

  .dashboard {
    padding: 10px;

    .block {
      padding: 20px 0;
      text-align: center;
    }

    p {
      color: #fff;
    }

    .num {
      font: 32px;
      font-weight: bold;
    }
  }

  .statistic {
    width: 100%;
    margin-top: 20px;
  }
}
</style>
